<template>
  <div>
    <el-form
      ref="formRef"
      :model="formData"
    >
      <el-form-item
        prop="userName"
        :rules="[
          { required: true, message: '此项必填' },
        ]"
      >
        <el-input
          v-model="formData.userName"
          class="h-10"
          placeholder="请输入用户名"
        />
      </el-form-item>
      <el-form-item
        prop="passWord"
        :rules="[
          { required: true, message: '此项必填' },
        ]"
      >
        <el-input
          v-model="formData.passWord"
          class="h-10"
          placeholder="请输入密码"
        />
      </el-form-item>
      <el-form-item>
        <el-Button
          type="primary"
          class="btn-login"
          :loading="auth.loginLoading"
          @click="handerSubmit(formRef)"
        >确定</el-Button>
      </el-form-item>
      <el-form-item>
        <el-Button
          class="btn-login"
          @click="() => toLoginModule('register')"
        >去注册</el-Button>
      </el-form-item>
    </el-form>
    <hr>
    <div class="mt-4 flex justify-around">
      <el-Button
        v-for="auth of roleEnum"
        :key="auth.name"
        type="primary"
        @click="authLogin(auth)"
      >{{ auth.name }}</el-Button>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus';
import { useRouterPush } from '@/utils';
import { useAuth } from '@/store';
const { toLoginModule } = useRouterPush();

const formData = reactive({
  userName: 'yangAdmin',
  passWord: '123456'
});

const auth = useAuth();

const formRef = ref<FormInstance>();
const handerSubmit = (formEl: FormInstance | undefined) => {

  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      auth.login(formData);
    } else {
      console.log('error submit!');
      return false;
    }
  });
};
function authLogin(info: Record<string, any>){
  const { account } = info;
  auth.login(account);
}
const roleEnum = [
  {
    name: '超级管理员',
    account: {
      userName: 'super',
      passWord: '123456'
    }
  },
  {
    name: '管理员',
    account: {
      userName: 'admin',
      passWord: '123465'
    }
  },
  {
    name: '用户',
    account: {
      userName: 'user',
      passWord: '123456'
    }
  }
];
// const reset = (el) => {
//   el.resetFields();
// };
</script>
<style scoped>

</style>
